<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <!--
        DOM事件的传递原理：
            当我们在页面上触发一个单击事件时，事件会先从父组件依次传到子组件，这个过程形象地称为事件捕获；当事件触发完毕，会从子组件依次向父组件传递，
            这个过程就叫事件冒泡。
        在vue中使用@click的方式绑定事件的的冒泡阶段
    -->

    <div id="app">
        <!--
        下面这里的事件是监听的冒泡阶段，那么当内层的点击时候，外层的div的点击事件也会被触发
        此时触发的顺序是：内层div的点击事件 -> 外层div的点击事件
        -->
       <div @click="outerClick" style="background-color: skyblue; padding: 10px; margin-bottom: 10px">
           外层 - 冒泡
           <div @click="middleClick" style="background-color: orange; padding: 10px; margin-bottom: 10px">
               中层 - 冒泡
               <div @click="innerClick" style="background-color: #64967E; padding: 10px; margin-bottom: 10px">
                   内层 - 冒泡
               </div>
           </div>
       </div>
        <hr>
        <!--
            下面这里监听的是捕获阶段，那么当内层的点击时候，外层的div点击事件也会被触发
            触发的顺序是：外层div的点击事件 -> 内层div的点击事件
            要从冒泡变为捕获，那么需要使用.capture修饰符
         -->
        <div @click.capture="outerClick" style="background-color: skyblue; padding: 10px; margin-bottom: 10px">
            外层 - 捕获
            <div @click.capture="middleClick" style="background-color: orange; padding: 10px; margin-bottom: 10px">
                中层 - 捕获
                <div @click.capture="innerClick" style="background-color: #64967E; padding: 10px; margin-bottom: 10px">
                    内层 - 捕获
                </div>
            </div>
        </div>
        <hr>
        <!--
            下面的我们不希望有冒泡这种行为出现，当点击内层组件时只有内层组件事件触发
            要阻止冒泡，可以使用.stop修饰符
        -->
        <div @click.stop="outerClick" style="background-color: skyblue; padding: 10px; margin-bottom: 10px">
            外层 - 阻止冒泡
            <div @click.stop="middleClick" style="background-color: orange; padding: 10px; margin-bottom: 10px">
                中层 - 阻止冒泡
                <div @click.stop="innerClick" style="background-color: #64967E; padding: 10px; margin-bottom: 10px">
                    内层 - 阻止冒泡
                </div>
            </div>
        </div>
        <!--
            事件的修饰符有如下一些：
            Stop            阻止事件传递
            Capture         监听捕获场景事件
            Once            只执行一次事件
            Self            当事件对象的target属性是当前组件时才触发事件
            Prevent         阻止默认事件
            Passive         不需阻止默认事件
        -->
    </div>
<script>
    const {createApp,ref} = Vue
    const config = {
        setup() {

            const outerClick = () => {
                alert('外层被点击')
            }
            const middleClick = () => {
                alert('中层被点击')
            }
            const innerClick = () => {
                alert('内层被点击')
            }

            return {outerClick,middleClick,innerClick}
        }
    }
    const app = createApp(config)
    app.mount('#app')
</script>
</body>
</html>